import React from 'react'
import { Table,  Popconfirm , Button, message } from 'antd'
import {  Link} from 'react-router'

//引入标准Fetch及IE兼容依赖
import 'whatwg-fetch';
import  config from '../../assets/config';
export default class myTable extends React.Component{
	constructor(props){
		super(props)
		this.state={
			tDate:[],
			loading:false
		}
	}
	componentDidMount() {
        this.getList()
    }
	getList=()=>{
        this.setState({loading:true});
        fetch(config.base+"attendance/list",{
                method: 'GET',
                mode: config.cors,
                headers: {'Content-Type':'text/plain;charset=UTF-8'}
            })
            .then(res=>{return res.json()})
            .then(rep=>{
                const data = []
                if(rep.length==0){message.error("暂时没有数据")}else{
                for (let i = 0; i <rep.length; i++) {
                    data.push({
                        key: rep[i].id,
                        courseName: rep[i].courseName,
                        signInStartTime:rep[i].signInStartTime!=null?config.changeDate(rep[i].signInStartTime):'未设置',
                        signInEndTime: rep[i].signInEndTime!=null?config.changeDate(rep[i].signInEndTime):'未设置'
                        })
                }
                this.setState({
                    tDate: data,
                    loading:false
                })
                }
            })
            .catch((e)=>{
                    console.log(e.message);
                    message.error("网络错误请稍后重试");
                    this.setState({loading:false})
                })
        }

    onDelete = (index) => {
     	
	    const tDate = [...this.state.tDate];
	     this.setState({loading:true});
            fetch(config.base+"attendance/delete",{
                    method: 'POST',
                    mode: config.cors,
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body:"id="+tDate[index].key
                })
                .then(res=>{return res.json()})
                .then(rep=>{
                this.setState({loading:false});
                if(rep.status==200){
                        message.success(rep.message)
                        tDate.splice(index, 1);
                        this.setState({ tDate });
                    }else{ 
                        message.error(rep.message)
                    }
                })
                .catch((e)=>{
                    console.log(e.message);
                    message.error("网络错误请稍后重试");
                    this.setState({loading:false})
                })
	  	}

	 render() {
	 	const tDate=this.state.tDate;
        const  columns=[{
			title:'签到课程',
			dataIndex:'courseName',
			width:'30%',
		},{
			title:'开始时间',
			dataIndex:'signInStartTime',
			width:'20%',
		},{
			title:'结束时间',
			dataIndex:'signInEndTime',
			width:'20%',
		},{
			title:'操作',
			dataIndex:'operation',
			width:'30%',
			render: (text, record, index) => {
	        
	        return (	            
	             <span>
	              <Popconfirm title="确定删除?" onConfirm={() => this.onDelete(index)}>
	                <Button>删除</Button>
	              </Popconfirm>&nbsp;
	              <Button type="primary" htmlType="button"><Link to={{pathname:"/courseSignResult",state:tDate[index].key}}>查看调研结果</Link></Button>
	            </span>
	          )   
	      }}
		];
        
        return (
        	<div>
        		<Button><Link to="/courseSignAdd">添加签到</Link></Button>
	        	<br /><br />
            	<Table columns={columns} dataSource={tDate} loading={this.state.loading} bordered pagination={false} className="animated fadeInUp " />
            </div>
        )
    }
}
